<script setup>
import {defineEmits, ref} from "vue";
import {EditPen, Position, Star, StarFilled} from "@element-plus/icons-vue";

defineProps({
  mTitle: String,
  mContent: String,
  mDescription: String,
  isStar: Boolean
})
const emits = defineEmits(['toggleStar','startTemplate'])
</script>

<template>
  <div id="body">
    <div style="display: flex;flex-direction: column">
      <div style="display: flex;flex-direction: row;">
        <div class="title">{{mTitle}}</div>
        <div style="margin-left: auto">
          <el-button circle @click="emits('toggleStar')" :size="'small'">
            <el-icon v-if="isStar"><StarFilled /></el-icon>
            <el-icon v-else><Star /></el-icon>
          </el-button>

        </div>
      </div>
      <el-scrollbar height="90px">
        <div class="content">{{mDescription}}</div>
      </el-scrollbar>
      <el-button plain style="border-radius: 10px;margin-left: 0;height: 30px" @click="emits('startTemplate')">
        <el-icon style="vertical-align: middle" :size="16">
          <Position />
        </el-icon>
        <span style="vertical-align: middle"> 使用模板 </span>
      </el-button>
    </div>

  </div>
</template>

<style scoped>
#body {
  position: relative;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  width: 250px;
  height: 150px;
  box-shadow: 1px 1px 5px #5e5e5e30;
  border-radius: 10px;
  padding: 5px;
  margin: 5px;
}
.title{
  font-size: 15px;
  font-weight: bold;
  color: #1b1b1b;
  padding: 5px 10px;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}
.content{
  font-size: 12px;
  color: #323232;
  padding: 0 10px;
  max-width: 90%;
  word-wrap: anywhere;
  overflow-y: scroll;
}
</style>